<template>
	<el-col :span="24" id="content1_container">

		<el-col :span="8" id="content_block">
			<el-tooltip class="item" effect="dark" content="查看所有区块" placement="top-start">
				<div id="blocks" @click="route2blocks"></div>
			</el-tooltip>
			<transition name="el-fade-in" v-on:after-leave="afterleave">
				<router-link to="/blocks" id="blocksnum" v-show="blockshow">{{blocks_num}}</router-link>
			</transition>
			<router-link to="/blocks" id="blockst">区块</router-link>
		</el-col>

		<el-col :span="8" id="content_transaction">
			<el-tooltip class="item" effect="dark" content="查看所有交易" placement="top-end">
				<div id="transactions" @click="route2txs"></div>
			</el-tooltip>
			<!-- <el-tooltip class="item" effect="dark" content="交易总数" placement="bottom-end"> -->
				<transition name="el-fade-in" v-on:after-leave="afterleave">
					<router-link to="/transactions" id="transactionsnum" v-show="txsshow">{{txs}}</router-link>
				</transition>
				<router-link to="/transactions" id="transactionst">交易</router-link>
			<!-- </el-tooltip> -->
		</el-col>

		<el-col :span="8" id="content_speed">
			<div id="txspeed"></div>
			<transition name="el-fade-in" v-on:after-leave="afterleave">
				<div id="tps" v-show="tpsshow">{{ctps}}/{{mtps}}</div>
			</transition>
			<div id="ctps">当前TPS/最大TPS</div>

		</el-col>

	</el-col>
</template>

<script>

	import herderjs from "../utils/header.js"

	export default {

		//当前组件定义的变量
		data () {
			return {
				blocks_num: "",
				txs: "",
				ctps: "",
				mtps: "",
				blockshow: true,
				txsshow: true,
				tpsshow: true,
				flag1: false,
				flag2: false,
				val: "",
				refresh_flag: true
			}
		},

		//当前组件创建时调用
		created () {
			this.getData()
		},

		//组件挂载时调用
		mounted(){
			//监听herderjs中的数据，实时接收herder.vue中传过来的值
			herderjs.$on('refresh_flag', (data) => { 
				this.refresh_flag = data
			})
			herderjs.$on('val', (data) => {
				if (data===0 && this.refresh_flag) {
					let _this = this
					setTimeout(function () {
						// this.val = data
						// console.log("11111")
						_this.getData(data)
					}, 10000)
				}
		    })
		},

		//当前组件中定义的方法
		methods: {

			//getData函数用于通过接口获取后端数据
			getData (val) {
				//使用post方式调用接口,totalBlocksTxs为查询所有交易的接口
				this.$api.post('blockchain/totalBlocksTxs', null, r => {
					if(r.success === true) {
						if (this.blocks_num != r.data.blocks) {
							this.blockshow = false
							this.blocks_num = r.data.blocks
						}
						if (this.txs != r.data.txs) {
							this.txsshow = false
							this.txs = r.data.txs
						}
						this.flag1 = true
						if (this.flag1===true && this.flag2=== true) {
							herderjs.$emit('val',val + 1)
							this.flag1 = false
							this.flag2 = false
						}
					} else {
						this.blocks_num = "null";
						this.txs = "null";
						this.flag1 = true
					}
				})

				this.$api.post('blockchain/tps', null, r => {
					if(r.success === true) {
						if (this.ctps != r.data.current || this.mtps != r.data.max) {
							this.tpsshow = false
							this.ctps = r.data.current
							this.mtps = r.data.max
						}
						this.flag2 = true
						if (this.flag1===true && this.flag2=== true) {
							herderjs.$emit('val',val + 1)
							this.flag1 = false
							this.flag2 = false
						}
					}
				})
			},

			route2blocks (){
				this.$router.push(`/blocks`)
			},

			route2txs (){
				this.$router.push(`/transactions`)
			},

			afterleave: function() {
				this.blockshow = true
				this.txsshow = true
				this.tpsshow = true
			}

		}
	}
</script>

<style scoped>

	#content1_container {
		height: 19%;
	}

	#content_block {
		height: 100%;
		background-image:url('../assets/blocks_bac.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#content_transaction {
		height: 100%;
		background-image:url('../assets/tx_bac.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#content_speed {
		height: 100%;
		margin:0 auto;
		/*margin-top: 3px;*/
		background-image:url('../assets/blockchainconcept.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#blocks {
		width: 13%;
		height: 25%;
		margin:0 auto;
		margin-top: 8%;
		background-image:url('../assets/icon_block_big.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		cursor: pointer;
	}

	#blocksnum {
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 1.8vw;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		cursor: pointer;
		text-decoration:none;
		/*margin-left: 36%;*/
		/*position: relative;
		left: 50%;
		margin-left: -11%;*/
		/*margin: 0 auto;*/
		margin-top: 2%;
		width: 100%;
		text-align: center;
		word-break: break-all;
		word-wrap: break-word;
	}

	#blockst{
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 1.2vw;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		cursor: pointer;
		text-decoration:none;
		margin-left: 44%;
		/*margin-top: 1%;*/
		width: 60%;
		word-break: break-all;
		word-wrap: break-word;
	}

	#transactions {
		width: 13%;
		height: 25%;
		margin:0 auto;
		margin-top: 8%;
		background-image:url('../assets/icon_trade_big.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		cursor: pointer;
	}

	#transactionsnum {
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 1.8vw;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		cursor: pointer;
		text-decoration:none;
		width: 100%;
		text-align: center;
		margin-top: 2%;
		/*width: 60%;*/
		word-break: break-all;
		word-wrap: break-word;
	}

	#transactionst {
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 1.2vw;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		cursor: pointer;
		text-decoration:none;
		margin-left: 44%;
		/*margin-top: 1%;*/
		width: 60%;
		word-break: break-all;
		word-wrap: break-word;
	}

	#txspeed {
		width: 13%;
		height: 28%;
		margin:0 auto;
		margin-top: 7%;
		background-image:url('../assets/icon_speed.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#tps {
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 1.8vw;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		text-decoration:none;
		width: 100%;
		text-align: center;
		margin-top: 1%;
		/*width: 60%;*/
		word-break: break-all;
		word-wrap: break-word;
	}

	#ctps {
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 1.2vw;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		text-decoration:none;
		/*margin-left: 44%;*/
		/*margin-top: 1%;*/
		width: 100%;
		text-align: center;
		word-break: break-all;
		word-wrap: break-word;
	}

</style>